// components/line-chart/line-chart.js
 import * as echarts from '../../ec-canvas/echarts';
 import geoJson from './china.js';
 Component({
  /**
   * 组件的属性列表
   */
  properties: {
    chartData: { // 属性名
      type: Object,
      value: null
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true
    }
  },
  /**
   * 数据监听器
   */
  observers: {
    'chartData': function (newValue) {
      this.ecComponent = this.selectComponent('#map-chart');
      this.initChart(newValue);
    }
  },
/**
   * 组件的方法列表
   */
  methods: {
    initChart: function (optionData) {
      //console.log(optionData)
      this.ecComponent.init((canvas, width, height) => {
        const chart = echarts.init(canvas, null, { 
          width: width,
          height: height
        });
  canvas.setChart(chart);
  echarts.registerMap('china', geoJson);
  var option = {
    // title: {
    //   text: '新型冠状病毒感染的肺炎疫情',
    //   left: 'center'
    // },
    tooltip: {
      triggerOn: "click",
      formatter: function (e, t, n) {
        return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "\n" + e.name + "：" + e.value
      }
    },
    visualMap: {
      min: 0,
      max: 1000,
      left: 26,
      bottom: 40,
      showLabel: !0,
      //text: ["高", "低"],
      textStyle: {
        fontSize: 8,
      },
      pieces: [{
        gt: 10000,
        label: "> 10000 人",
        color: "#7f1100"
      }, {
        gte: 1000,
        lte: 10000,
        label: "1000 - 9999 人",
        color: "#ff5428"
      }, 
        {
          gte: 100,
          lte: 1000,
          label: "100 - 999 人",
          color: "#ff8c71"
        },{
        gte: 10,
        lte: 100,
        label: "10 - 99 人",
          color: "#ffd768"
      }, {
        gt: 0,
        lt: 10,
        label: "0 - 9 人",
        color: "#ffffff"
      }],
      show: !0
    },
    geo: {
      map: "china",
      roam: !1,
      scaleLimit: {
        min: 1,
        max: 2
      },
      zoom: 1.23,
      top: 50,
      label: {
        normal: {
          show: !0,
          fontSize: "7",
          color: "rgba(0,0,0,0.7)"
        }
      },
      itemStyle: {
        normal: {
          //shadowBlur: 50,
          //shadowColor: 'rgba(0, 0, 0, 0.2)',
          borderColor: "rgba(0, 0, 0, 0.2)"
        },
        emphasis: {
          areaColor: "#f2d5ad",
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          borderWidth: 0
        }
      }
    },
    series: [{
      name: "确诊病例",
      type: "map",
      geoIndex: 0,
      data: optionData.seriesData
    }]
  }
  chart.setOption(option);
  return chart;
       });
     }
   }
 })